<template>
	<view class="ct">
		<view class="inputWrap bgw pd30">
			<view class="input">
				<view class="inputLeft">
					<view class="title">处方名称<text class="red">*</text></view>
					<input type="text" v-model="title" placeholder="请输入处方名称" placeholder-class="pcs" />
				</view>
			</view>
			<view class="input">
				<view class="inputLeft">
					<view class="title">处方加减<text style="color: #fff;">*</text></view>
					<input type="text" v-model="jiajian" placeholder="处方加减" placeholder-class="pcs" />
				</view>
			</view>
			<view class="input">
				<view class="inputLeft">
					<view class="title">备注<text style="color: #fff;">*</text></view>
					<input type="text" v-model="remark" placeholder="请输入备注" placeholder-class="pcs" />
				</view>
			</view>
			<view class="input">
				<view class="inputLeft">
					<view class="title">剂型<text class="red">*</text></view>
					<picker @change="bindPickerChange" :value="index" :range="array" range-key="title">
						<view class="pcs" v-if="!arrayName">请选择剂型</view>
						<view class="pickerInput" v-else>{{arrayName}}</view>
					</picker>
				</view>
			</view>
			<view class="input">
				<view class="inputLeft">
					<view class="title">药品<text class="red">*</text></view>
					<!-- <input type="text" disabled placeholder="在线选药" placeholder-class="pcs" /> -->
					<bjx-inputs item-key="value" placeholder='请输入内容' @list="getData" @select='select' overflow="hide"></bjx-inputs>
				</view>
			</view>
			
			<view class="boxes">
				<view class="uniBtn">
					<view class="box1">药名</view>
					<view class="box2">数量g</view>
					<view class="box3">操作</view>
				</view>
				<view class="uniBtn" v-for="(item,index) in list" :key="index">
					<view class="box1">{{item.value}}</view>
					<input class="box2" v-model="item.num" type="number" placeholder="请输入" placeholder-class="pcs" />
					<view class="box3" @click="del(index)">
						<img src="../../static/bg/del.png" alt="">
					</view>
				</view>
			</view>
		</view>
		
		<view class="btnStyle" @click="submit">立即提交</view>
	</view>
</template>

<script>
	import {
		get_jixing,get_yaopin,cyf_insert,cyf_update
	} from '@/request/api.js'
	import BjxInputs from '@/components/bjx-inputs/bjx-inputs.vue'
	export default {
		components: {
			BjxInputs
		},
		data() {
			return {
				id:'',
				title: '',
				remark: '',
				jiajian: '',
				array: [
					// {id:'1',name:'中药饮片'},
					// {id:'2',name:'代煎'},
					// {id:'3',name:'自煎'},
				],
				index: 0,
				arrayId:'',
				arrayName:'',
				
				value: '',
				data: [
					// {id: 1,num:'', value: '这是默认值2'},
					// {id: 2,num:'', value: '数组中嵌套json格式数据'},
					// {id: 3,num:'', value: '这种格式比较常用'},
					// {id: 4,num:'', value: '只需在组件中设定'},
					// {id: 5,num:'', value: '单行文本超出省略'},
					// {id: 6,num:'', value: '这是6'},
					// {id: 7,num:'', value: '这是7'},
					// {id: 8,num:'', value: '这是8'},
					// {id: 9,num:'', value: '这是9'},
					// {id: 10,num:'', value: '这是10'}
				],
				list:[],
			}
		},
		onLoad(options) {
			if(options.query){
				let items = JSON.parse(JSON.parse(options.query).items);
				this.id = items.id;
				this.title = items.title;
				this.arrayId = items.jixing;
				this.arrayName = items.typestr;
				this.remark = items.remark;
				this.jiajian = items.jiajian;
				this.list = items.arr.map(function(item) {
				    return {
				        id: item.yid,
				        value: item.name,
						num:item.num
				    }
				});
			}
			
			//剂型
			this.getType();
			
			// 药品
			get_yaopin({cid:uni.getStorageSync('companyId')}).then(res=>{
				this.data = res.data.map(function(item) {
				    return {
				        id: item.id,
				        value: item.name,
						num:''
				    }
				});
			})
		},
		methods: {
			//剂型
			getType(){
				get_jixing({cid:uni.getStorageSync('companyId')}).then(res=>{
					this.array = res.data
				})
			},
			bindPickerChange(e) {
				this.index = e.target.value;
				this.arrayId = this.array[e.target.value].id;
				this.arrayName = this.array[e.target.value].title;
			},
			
			// 远程加载数据 返回一个对象，{value: 输入框值, callback: 回调函数}
			getData(e) {
				// console.log(e)
				this.value = e.value
				if (!e.value) {
					e.callback(this.data)
				} else {
					let data = []
					this.data.forEach(item => {
						if (item.value.indexOf(e.value) > -1) {
							data.push(item)
						}
					})
					e.callback(data)
				}
			},
			select(value) {
				// console.log(value)
				if(this.list.indexOf(value)===-1){
					this.list.push(value)
				    // console.log("指定元素不在数组中"+JSON.stringify(this.list));
				}else{
					console.log('已经有了')
				}
			},
			del(index){
				this.list.splice(index, 1);
			},
			
			search(){
				uni.navigateTo({
					url:'/pages/prescription/search'
				})
			},
			
			submit(){
				if(!this.title){
					uni.showToast({
						title:'请输入处方名称',
						icon:'none'
					})
					return
				}
				if(!this.arrayId){
					uni.showToast({
						title:'请选择剂型',
						icon:'none'
					})
					return
				}
				if(this.list.length == 0){
					uni.showToast({
						title:'请输入药品',
						icon:'none'
					})
					return
				}
				this.list.forEach(item=>{
					if(!item.num){
						uni.showToast({
							title:'请完整输入药品 g 数',
							icon:'none'
						})
						return;
					}
				})
				for(let i=0;i<this.list.length;i++){
					if(!this.list[i].num){
						uni.showToast({
							title:'请完整输入药品 g 数',
							icon:'none'
						})
						return;
					}
				}
				
				if(this.id){
					let param = {
						id:this.id,
						title:this.title,
						jixing:this.arrayId,
						remark:this.remark,
						jiajian:this.jiajian,
						arr:JSON.stringify(this.list),
					}
					cyf_update(param).then(res=>{
						uni.showToast({
							title: '操作成功',
							icon: "none"
						})
						setTimeout(function(){
							uni.navigateBack()
						},800)
					})
				}else{
					let param = {
						title:this.title,
						jixing:this.arrayId,
						remark:this.remark,
						jiajian:this.jiajian,
						arr:JSON.stringify(this.list),
					}
					cyf_insert(param).then(res=>{
						uni.showToast({
							title: '添加成功',
							icon: "none"
						})
						setTimeout(function(){
							uni.navigateBack()
						},800)
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ct{
		.inputWrap {
			margin-bottom: 150upx;
			.input {
				height: 96upx;
				border-bottom: 1px solid #E5E5E5;
				display: flex;
				align-items: center;
				justify-content: space-between;
		
				.inputLeft {
					display: flex;
					align-items: center;
		
					.title {
						width: 126upx;
						font-size: 28upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						line-height: 40px;
						color: #414141;
						margin-right: 40upx;
						text-align: right;
					}
					
					.pickerInput {
						line-height: 96upx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 28upx;
					}
					input{
						width: 500upx;
						font-size: 28upx;
					}
					picker{
						width: 250upx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		
			// .input:last-of-type {
			// 	border: none;
			// }
			.boxes{
				text-align: center;
				font-size: 28upx;
				margin: 25upx 0;
				
				.uniBtn{
					margin-bottom: 20upx;
					.box1{
						width: 45%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.box2{
						width: 35%;
					}
					.box3{
						width: 20%;
						
						img{
							width: 40upx;
							height: 40upx;
						}
					}
				}
				
			}
		}
		.submit{
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #9F9F9F;
			padding: 36upx;
			color: #6996FE;
			margin-bottom: 36upx;
		}
		
	}
	
</style>

